<div class="layuimini-main">
    <div class="layui-form layuimini-form">
        <ul class="dormitory"></ul>
    </div>
</div>
<style>
.dormitory{
    height: 800px;
    overflow:scroll;
}
.dormitory>li{
    width: 100%;
    clear: both;
    margin-bottom: 5px;
}
.dormitory>li>p{
    height: 40px;
    background-color: #f8f8f8;
    line-height: 40px;
    font-size: 15px;
    cursor: pointer;
    padding-left: 10px;
    border: 1px solid #dddddd;
    border-radius: 4px;
}
.dormitory>li>p>span{
    float: right;
    margin-right: 10px;
}
.dormitory>li>p>span>button{
    cursor: pointer;
    color: #00998b;
    background: transparent;
    border: 0px;
    font-size: 20px;
}
.bed{
    display: none;
}
.bed li{
    float: left;
    width: 130px;
    height: 130px;
    border:1px solid #f0f0f0;
    margin: 10px;
    text-align: center;
    color: #999999;
}
.bed li:hover{
    background-color: #f0f0f0;
}
.bed li i{
    font-size: 20px;
    cursor: pointer;
}
.bed li i:hover{
    color: #00998b;
    font-size: 20px;
    cursor: pointer;
}
</style>
<script>
    layui.use(['form', 'table','axios','store'], function () {
        let form = layui.form,
            layer = layui.layer,
            axios = layui.axios,
            store = layui.store
            $ = layui.$;
        function loadDormitory(){
            axios.get('student/selectDormitory',{}).then(function (response) {
              if(response.code==0){
                data = response.data.data
                
                $('.dormitory').empty();
                $('.dormitory').append(response.message);
                data.forEach(item=>{
                    let html =`<li>
                                  <p key="${item.dormitoryId}">${item.dormitoryId}-${item.buildingName}-${item.dormitoryNo}
                                      <span>
                                      容量：${item.roomSize}
                                      剩余数量：${item.unSelectedSize}
                                      </span>
                                  </p>
                                  <ul class="bed"><li></li><li></li><li></li></ul>
                              </li>`;
                    let htmlObj = $(html);
                    htmlObj.find('p').click(function () {
                        $(this).siblings().toggle(200);
                        loadBed($(this).attr("key"),$(this).siblings(),item.studentList);
                    });
                    htmlObj.find('p').trigger('click');
                    $('.dormitory').append(htmlObj);//追加到页面
                });
              }else{
                  $('.dormitory').append(response.message);
                  return;
              }
                
            })
        }
        loadDormitory();
        function loadBed(dormitoryId,objbed,studentList){
          axios({
                method:"post",
                url:"/bed/getList/",
                data:{"dormitoryId":dormitoryId}
            }).then(res=>{
                data = res.data.beds
                objbed.empty();
                if(data.length==0){
                    objbed.append('暂无床位信息');
                }
                data.forEach(item=>{
                  console.log(item)
                  console.log(item)
                  console.log(item)
                  console.log(item)
                    let html;
                    if(studentList.some(v=>(item.id == v.bedId&&v.studentId==store.getStudentId()))){
                        html = `
                        <li key="${item.id}">
                        <img src="../images/自己床位.png">
                        
                        <p>床位：${item.bno}</p>
                        <p>你已选择</p>
                        <p>
                            <input type="checkbox" checked disabled lay-skin="primary">
                        </p>
                        </li>
                    `;
                    }
                    else if(studentList.some(v=>item.id == v.bedId)){
                        html = `
                        <li key="${item.id}">
                        <img src="../images/别人床位.png">
                        
                        <p>床位：${item.bno}</p>
                        <p>${item.studentName}</p>
                        <p>
                            <input type="checkbox" checked disabled lay-skin="primary">
                        </p>
                        </li>
                    `;
                    }else{
                        html = `
                        <li key="${item.id}">
                        <img src="../images/bed-un.png">
                        
                        <p>床位：${item.bno}</p>
                        <p>未选择</p>
                        <p>
                            <input type="checkbox" lay-filter="bedxx" bedId = "${item.id}" dormitoryId="${dormitoryId}"  lay-skin="primary">
                        </p>
                        </li>
                    `;
                    }
                    /*
                    let j = 0;
                    for(;j<studentList.length;j++){
                      if(studentList[j].bedId==item.id){
                        if(studentList[j].studentId==store.getStudentId()){
                          html = `
                        <li key="${item.id}">
                        <img src="../images/bed-un.png">
                        <p>床位：${item.bno}</p>
                        <p>你的选择</p>
                        <p>
                            <input type="checkbox" checked disabled lay-skin="primary">
                        </p>
                        </li>
                        `
                        break
                        }else{
                          html = `
                        <li key="${item.id}">
                        <img src="../images/bed-un.png">
                        <p>床位：${item.bno}</p>
                        <p>已选择</p>
                        <p>
                            <input type="checkbox" checked disabled lay-skin="primary">
                        </p>
                        </li>
                        `
                        break
                        }  
                      }
                    }
                    if(j==studentList.length){
                        html = `
                        <li key="${item.id}">
                        <img src="../images/bed-un.png">
                        <p>bedId：${item.id}</p>
                        <p>床位：${item.bno}</p>
                        <p>未选择</p>
                        <p>
                            <input type="checkbox" lay-filter="bedxx" bedId = "${item.id}" dormitoryId="${dormitoryId}"  lay-skin="primary">
                        </p>
                        </li>
                    `;
                    }
                    */
                    htmlObj = $(html);
                    form.render();
                    objbed.append(htmlObj);
                });
            }).catch(function (error) {
                layer.msg(error);
            });
        }
        
        form.on('checkbox(bedxx)', function(data){
          layer.confirm('有且仅有一次的选择机会！真的要选择该床位吗？', function (index) {
            let _dormitoryId = $(data.elem).attr("dormitoryId");
            let _bedId = $(data.elem).attr("bedId");
            console.log(_dormitoryId)
            console.log(_bedId)
            axios({
              method:"post",
              url:"dormitoryStudent/selectDormitory",
              data:{"dormitoryId":_dormitoryId,"bedId":_bedId}
            }).then(res=>{
              if(res.code==0){
                layer.msg(res.message, {
                        icon: 6,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                      loadDormitory();
                    });
              }else{
                layer.msg(res.message,{
                    icon: 5,
                    time: 2000,
                    anim:6
                },function(){
                  loadDormitory();
                });
              }
              
            }).catch(error=>{
              layer.msg("请求错误",{
                icon:5,
                time:2000,
                anim:6
              },function(){
                loadDormitory();
              });
            })
            layer.close(index);
          });    
        })

    });
</script>